<template>
  <div>
    <div class="title">
      <i class="el-icon-s-tools" style="font-size:20px;margin-right:5px;"></i>
      <span>我的资料</span>
      <i class="el-icon-loading" v-if="isLoad"></i>
    </div>
    <el-divider></el-divider>
    <el-form ref="form" :model="form" v-if="!isLoad" label-width="80px">
      <el-form-item label="昵称" prop="name">
        <el-input v-model="form.userName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item
        label="年龄"
        prop="age"
        :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
      >
        <el-input v-model.number="form.age" :disabled="isEdit"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender" :disabled="isEdit">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="邮箱"
        prop="email"
        :rules="[
      { required: false, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ]"
      >
        <el-input v-model="form.email" :disabled="isEdit"></el-input>
      </el-form-item>
      <!-- <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="onEdit()" :disabled="isEdit">保存</el-button>
        <el-button @click="isEdit = !isEdit" :disabled="!isEdit">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ['userinfos'],
  data() {
    return {
      form: {
        userName: '',
        age: '',
        gender: '',
        email: ''
      }, // 基本信息
      isEdit: true,
      birthDate: '',
      isLoad: true
    }
  },
  methods: {
    // 保存资料
    async onEdit() {
      this.comm.genderChange(0, this.form)
      var editDatas = await this.comm.compareObject(this.userinfos, this.form)
      console.log(editDatas)
      const res = await this.$http.post('/editDetail', {
        username: this.form.userName,
        editData: this.form
      })
      if (res.meta.status !== 200) {
        return this.$Message.error('保存失败')
      }
      this.$Message.success('保存成功')
      // this.$router.go(0)
      this.comm.genderChange(1, this.form)
      this.isEdit = true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoad = false
      // 给this.form赋值
      this.comm.assignmentObject(this.userinfos, this.form)
      // 性别转换
      this.comm.genderChange(1, this.form)
    }, 500)
  }
}
</script>
<style lang="less" scoped>
div {
  .el-form {
    width: 50%;
  }
  .title {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
}
.el-divider--horizontal {
  margin: 10px 0 10px 0;
}
</style>
